<template>
  <div>
    <div class="header">
    <router-link to="/waimai" tag="span" class="left iconfont icon-Previous">
        </router-link>
          <span>发现</span>
          <span></span>
    </div>
    <div class="shang">
      <div class="jinbi">
        <div class="j_left">
          <h2 class="title">
            金币商城
          </h2>
          <p class="tip">
            0元好物在这里
          </p>
        </div>
        <div class="j_right">
          <img src="https://fuss10.elemecdn.com/8/38/9c9aea0e856149083d84af3444b78jpeg.jpeg?imageMogr/format/webp/" alt="">
        </div>
      </div>
      <div class="jinbi">
        <div class="j_left">
          <h2 class="title">
            有红包快抢
          </h2>
          <p class="tip">
            礼包福利领不停
          </p>
        </div>
        <div class="j_right">
          <img src="https://fuss10.elemecdn.com/f/85/2bb180f2052c33cfec3852ef2bfccjpeg.jpeg?imageMogr/format/webp/" alt="">
        </div>
      </div>
      <div class="jinbi">
        <div class="j_left">
          <h2 class="title">
            必吃爆料
          </h2>
          <p class="tip">
            最夯外卖指南
          </p>
        </div>
        <div class="j_right">
          <img src="https://fuss10.elemecdn.com/2/36/b784087aff96a97f4e5183d0d784fjpeg.jpeg?imageMogr/format/webp/" alt="">
        </div>
      </div>
      <div class="jinbi">
        <div class="j_left">
          <h2 class="title">
            推荐有奖
          </h2>
          <p class="tip">
            5元现金拿不停
          </p>
        </div>
        <div class="j_right">
          <img src="https://fuss10.elemecdn.com/6/76/8d42eef97ff4c1c2b671085358541jpeg.jpeg?imageMogr/format/webp/" alt="">
        </div>
      </div>
      <div class="jinbi">
        <div class="j_left">
          <h2 class="title">
            周边优惠
          </h2>
          <p class="tip">
            领取口碑好券
          </p>
        </div>
        <div class="j_right">
          <img src="https://fuss10.elemecdn.com/5/10/2351e989d4171479ba0d7b5c06053jpeg.jpeg?imageMogr/format/webp/" alt="">
        </div>
      </div>
      <div class="jinbi">
        <div class="j_left">
          <h2 class="title">
            百元红包
          </h2>
          <p class="tip">
            兴业银行联名卡
          </p>
        </div>
        <div class="j_right">
          <img src="https://fuss10.elemecdn.com/3/cc/a45d2b9d7d09bbc49b40d4e626093jpeg.jpeg?imageMogr/format/webp/" alt="">
        </div>
      </div>
    </div>

    <div class="tupian">
      <img src="https://fuss10.elemecdn.com/b/6d/656006edcd86033a1b32b23ddea37jpeg.jpeg?imageMogr/format/webp/" alt="">
    </div>


 <div class="foot">
        <div class="push">
            <div class="tpush">
                <h2> <span class="span"></span> 美食热推</h2>
                <p>你的口味，我都懂得</p>
            </div>
            <div class="meishi">
                <dl>
                    <dt><img src="https://fuss10.elemecdn.com/3/1c/f1bcd04092a2bb5383f86adc96110jpeg.jpeg?imageMogr/format/webp/" alt=""></dt>
                    <dd>驴肉火烧</dd>
                    <dd class="qian">￥20</dd>
                </dl>

                <dl>
                    <dt><img src="https://fuss10.elemecdn.com/b/92/734cd41dca0e8f659ed2809983da5jpeg.jpeg?imageMogr/format/webp/" alt=""></dt>
                    <dd>美味干锅手撕包菜</dd>
                    <dd class="qian">￥20</dd>
                </dl>

                <dl>
                    <dt><img src="https://fuss10.elemecdn.com/9/65/8ff645b60a33a03b5637e327218f4jpeg.jpeg?imageMogr/format/webp/" alt=""></dt>
                    <dd>NaN折</dd>
                    <dd class="qian">￥52</dd>
                </dl>

            </div>
            <div class="chakan">
                  <router-link to="/meishi">查看更多></router-link>
            </div>
        </div>
        <div class="price push">
            <div class="tpush">
                <h2> <span class="span"></span>天天特价</h2>
                <p>特价商品，一网打尽</p>
            </div>
            <div class="meishi">
                <dl>
                    <dt><img src="https://fuss10.elemecdn.com/4/8e/6a3108046225f80e85ef669b08183jpeg.jpeg?imageMogr/format/webp/" alt=""></dt>
                    <dd>毛血旺</dd>
                    <dd class="qian">￥19 <span class="qian1">	￥38</span></dd>
                </dl>

                <dl>
                    <dt><img src="https://fuss10.elemecdn.com/7/6c/8d178f0faef3f9d8f65641091e113jpeg.jpeg?imageMogr/format/webp/" alt=""></dt>
                    <dd>小米椒爱上小公鸡</dd>
                    <dd class="qian">￥21 <span class="qian1">	￥42</span></dd>
                </dl>

                <dl>
                    <dt><img src="https://fuss10.elemecdn.com/e/7f/671b4035e9424615908deed983bdcjpeg.jpeg?imageMogr/format/webp/" alt=""></dt>
                    <dd>农家小炒肉（大份）</dd>
                    <dd class="qian">￥22.8 <span class="qian1">	￥38</span></dd>
                </dl>

            </div>
            <div class="chakan">
                <!-- <a href="">查看更多></a> -->
                <router-link to="">查看更多></router-link>
            </div>
        </div>

        <div class="time push">
            <div class="tpush">
                <h2> <span class="span"></span> 限时好礼
                </h2>
                <p>金币换豪礼</p>
            </div>
            <div class="meishi">
                <dl>
                    <dt><img src="https://fuss10.elemecdn.com/7/c5/f595b52bc6b50c9899398dccffd42jpeg.jpeg?imageMogr/format/webp/" alt=""></dt>
                    <dd>7元饿了么红包</dd>
                    <dd class="qian">105金币 <span class="qian1">￥7</span></dd>
                </dl>

                <dl>
                    <dt><img src="https://fuss10.elemecdn.com/a/a6/4f2df160165f840d8480e01ff262cjpeg.jpeg?imageMogr/format/webp/" alt=""></dt>
                    <dd>小金币 大福袋</dd>
                    <dd class="qian">12金币</dd>
                </dl>

                <dl>
                    <dt><img src="https://fuss10.elemecdn.com/d/56/8b479231309654bfa07f28999768bjpeg.jpeg?imageMogr/format/webp/" alt=""></dt>
                    <dd>阳澄湖大闸蟹礼盒</dd>
                    <dd class="qian">9金币<span class="qian1">￥368</span></dd>
                </dl>

            </div>
            <div class="chakan">
                  <router-link to="">查看更多></router-link>
            </div>
        </div>




    </div>


















  </div>
</template>
<script>
export default {
  data: function() {
    return {
      list: [{}]
    };
  },
  methods: {}
};
</script>
<style lang="less" scoped>
.px2rem(@name, @px) {
  @{name}: @px / 75 * 1rem;
}
.header {
  width: 100%;
  .px2rem(height,86);
  background: linear-gradient(90deg, rgb(0, 170, 255), rgb(0, 134, 255));
  display: flex;
  align-items: center;
  justify-content: space-between;
  .px2rem(font-size,37);
  font-weight: bolder;
  color: #ffffff;
  position: sticky;
  top: 0;
  span {
    width: 33%;
    text-align: center;
  }
  .left {
    text-align: left;
    .px2rem(padding-left,20);
  }
}
.shang {
  width: 100%;
  .px2rem(height,460);
  // .px2rem(margin-top,86);
  display: flex;
  flex-wrap: wrap;

  .jinbi {
    width: 50%;
    .px2rem(height,160);
    display: flex;
    align-items: center;
    box-sizing: border-box;
    border: 1px solid #ccc;
    .j_left {
      width: 50%;
      .px2rem(line-height,45);
      .px2rem(height,150);

      h2 {
        .px2rem(padding-top,40);
        .px2rem(padding-left,20);
        .px2rem(font-size,30);
        color: rgb(255, 153, 0);
      }
      p {
        // .px2rem(padding-top,20);
        .px2rem(padding-left,20);
      }
    }
    .j_right {
      width: 50%;
      .px2rem(height,150);
      img {
        width: 60%;
        padding: 10px 25px;
        .px2rem(padding-right,20);
      }
    }
  }
}

.tupian {
  .px2rem(height,200);
  width: 100%;
  img {
    width: 100%;
    border-top: 10px solid #cccccc;
    border-bottom: 10px solid #cccccc;
  }
}
.push {
    width: 100%;
    .px2rem(height, 600);
    border: 5px solid #cccccc;
    border-left: none;
    border-right: none;
    .tpush {
        width: 100%;
        .px2rem(height, 140);
        text-align: center;
        h2 {
            .px2rem(font-size, 40);
            font-weight: bolder;
            .px2rem(padding-top, 60);
        }
        P {
            .px2rem(font-size,20);
            .px2rem(padding-top, 5);
        }
    }
    .meishi {
        width: 100%;
        .px2rem(height, 360);
        display: flex;
        align-items: flex-start; // .px2rem(height, 365);
        .px2rem(height, 360);
        dl {
            // .px2rem(margin-top, 40);
            flex: 1;
            display: flex;
            flex-direction: column;
            .px2rem(height, 360);
            dt {
                img {
                    width: 90%;
                    .px2rem(height,250);
                }
            }
            dd {
                width: 100%;
                .px2rem(height,110);
                .px2rem(margin-top, 10);
            }
            .qian {
                color: red;
            }
            .qian1 {
                color: #cccccc;
                .px2rem(padding-left, 20);
                text-decoration: line-through;
            }
        }
    }
    .chakan {
        width: 100%;
        .px2rem(height, 100);
        text-align: center; // .px2rem(margin-top, 60);
        a {
            .px2rem(font-size, 30);
            color: #cccccc;
            font-weight: bolder;
            line-height: 3;
        }
    }
}

.time {
    .px2rem(margin-bottom, 100);
    border-bottom: none;
}
</style>
